<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //环境配置，算法代码不在这里，请从91行开始阅读
    //一些常量，可以自定义修改
    const WIDTH = 100;
    const HEIGHT = 100;
    //不建议修改的常量
    const RED = "#FF0000";
    const GREEN = "#00FF00";
    const BLUE = "#0000FF";
    const BLACK = '#000000'
    //parpare environment:

    const canv = document.createElement('canvas');
    canv.id = 'canvas';
    canv.width = WIDTH << 2;
    canv.height = HEIGHT << 2;
    canv.style = 'border: 1px solid #000; display: block; margin: 0 auto';
    document.body.appendChild(canv);

    const ctx = canv.getContext('2d');

    let map = new Array(100).fill(0).map(() => new Array(100).fill(false));

    let seedx, seedy;
    let seeds = [];
    let showSeed = false;


    //用dda画出预设图形
    dda(10, 10, 90, 10);
    dda(10, 10, 10, 90);
    dda(10, 90, 90, 90);
    dda(90, 10, 90, 90);

    dda(20, 30, 40, 30);
    dda(60, 30, 80, 30);
    dda(40, 50, 60, 50);
    dda(20, 70, 80, 70);
    dda(20, 30, 20, 70);
    dda(40, 30, 40, 50);
    dda(60, 30, 60, 50);
    dda(80, 30, 80, 70);

    function clear() {
      ctx.width = ctx.width;

      ctx.fillStyle = BLACK;

      dda(10, 10, 90, 10);
      dda(10, 10, 10, 90);
      dda(10, 90, 90, 90);
      dda(90, 10, 90, 90);

      dda(20, 30, 40, 30);
      dda(60, 30, 80, 30);
      dda(40, 50, 60, 50);
      dda(20, 70, 80, 70);
      dda(20, 30, 20, 70);
      dda(40, 30, 40, 50);
      dda(60, 30, 60, 50);
      dda(80, 30, 80, 70);

      seeds = [];
      showSeed = false;
    }

    function point(x, y, flag = true) {
      if(map[x][y]){console.log('有重复：', x, y);}
      map[x][y] = true;
      ctx.fillRect(x << 2, (HEIGHT - y - 1) << 2, 4, 4);
      if (flag) {
        console.log('create a point (' + x + ',' + y + ')');
      }
    }

    function dda(x1, y1, x2, y2) { // 用dda方法绘制(x1,y1),(x2,y2)这条直线
      if (x1 === x2) { //特殊情况：没有k的时候
        let min = Math.min(y1, y2);
        let max = Math.max(y1, y2);
        for (let i = min; i <= max; i++) {
          point(x1, i, false);
        }
        return;
      }
      if (y1 === y2) { //特殊情况：没有k的时候
        let min = Math.min(x1, x2);
        let max = Math.max(x1, x2);
        for (let i = min; i <= max; i++) {
          point(i, y1, false);
        }
        return;
      }
      let k = (y2 - y1) / (x2 - x1);
      let x = 0;
      let y = 0;
      let temp = 0;
      if (Math.abs(k) > 1) { // |k|>1
        if (y1 > y2) { //调整1，2的位置，使y1一定要小于y2
          temp = y1;
          y1 = y2;
          y2 = temp;
          temp = x1;
          x1 = x2;
          x2 = temp;
        }
        k = (x2 - x1) / (y2 - y1);
        x = x1;
        for (y = y1; y <= y2; y++) {
          point(Math.trunc(x + 0.5), y, false);
          x = x + k;
        }
      } else { //|k|<=1
        if (x1 > x2) { //调整1，2的位置，使x1一定要小于x2
          temp = y1;
          y1 = y2;
          y2 = temp;
          temp = x1;
          x1 = x2;
          x2 = temp;
        }
        y = y1;
        for (x = x1; x <= x2; x++) {
          point(x, Math.trunc(y + 0.5), false);
          y = y + k;
        }
      }
    }
    function getSeed() {
      clear();
      let nums = document.getElementsByTagName('input');
      seedx = Number(nums[0].value), seedy = Number(nums[1].value);
      seeds.push({ x: seedx, y: seedy });
      fill();
    }
    function changeSeedState() {
      let store = ctx.fillStyle;
      if (showSeed) {
        ctx.fillStyle = BLUE;
        for (let i = 0; i < seeds.length; i++) {
          point(seeds[i].x, seeds[i].y);
        }
        showSeed = false;
      } else {
        ctx.fillStyle = RED;
        for (let i = 0; i < seeds.length; i++) {
          point(seeds[i].x, seeds[i].y);
        }
        showSeed = true;
      }
      ctx.fillStyle = store;
    }
  </script>
  <div style="text-align: center;">
    请输入种子x坐标：(10~89)
    <input type="number"><br>
    请输入种子y坐标：(10~89)
    <input type="number"><br>
    <button onclick="getSeed()">确认</button><br>
    <button onclick="changeSeedState()">切换种子点显示颜色</button>
  </div>
  <script src="./算法代码在这里.js"></script>
</body>

</html>